<template>
	<view class="wdthdrawal">
		
		<loading v-if="loading" ></loading>
		
		<view v-else style="font-size:16px;padding:15px;background: #fff;">
			<uni-breadcrumb separator="/">
				<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
					{{route.name}}
				</uni-breadcrumb-item>
			</uni-breadcrumb>
		</view>
		<view class="table">
			<uni-table border stripe emptyText=" " style="border:1px solid #ccc;min-height:200px;margin:10rpx 0">
				<uni-tr>
					<uni-td colspan="2" style="text-align:center;">
						<view class="items titleApp" style="font-size:18px" >
							{{data.shop.title}}
						</view>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						提现金额:
					</uni-td>
					<uni-td >
						<text class="fontColorApp">
							￥{{(data.price/100).toFixed(2)}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						<text class="">
							提现服务费
						</text>
					</uni-td>
					<uni-td class="">
						<text class="fontColorApp">
							￥{{data.bank.serve_money}}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						提现开户人
					</uni-td>
					<uni-td>
						{{data.bank.properties.name}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						银行预留手机
					</uni-td>
					<uni-td>
						<text class="TelApp">
							{{ rebornMobile(data.bank.properties.bank_tel) }}
						</text>
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						提现银行卡号
					</uni-td>
					
					<uni-td class="fontColorApp" style="font-weight:bold;font-size:15px">
						{{bankCardsReconfiguration(data.bank.properties.bank_no)}}
					</uni-td>
					
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						提现交易单号
					</uni-td>
					<uni-td class=" ">
						{{data.order.order_no}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td width="150" style="text-align:center;">
						提现发起时间
					</uni-td>
					<uni-td>
						<uni-dateformat :date="data.create_date" format="yyyy年MM月dd日 hh时mm分ss秒"></uni-dateformat>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="table">
			<uni-table border stripe emptyText=" " style="border:1px solid #ccc;min-height:200px;margin:10rpx 0">
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						法人姓名
					</uni-td>
					<uni-td>
						{{shop_authentication.legal_person_name}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						法人身份证号
					</uni-td>
					<uni-td>
						{{shop_authentication.legal_person_card}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						统一社会信用代码
					</uni-td>
					<uni-td>
						{{shop_authentication.business_license_number}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						营业执照地址
					</uni-td>
					<uni-td>
						{{shop_authentication.business_license_address}}
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shop_authentication.legal_person_card_photo_z">
					<uni-td colspan="1" style="text-align:center;">身份证-正</uni-td>
					<uni-td>
						<image
							:src="shop_authentication.legal_person_card_photo_z.path+'?x-oss-process=image/resize,m_fixed,h_100,w_100'"
							@click="eventImage(1)" mode="widthFix" style="width:300rpx;"></image>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shop_authentication.legal_person_card_photo_f">
					<uni-td colspan="1" style="text-align:center;">身份证-反</uni-td>
					<uni-td>
						<image
							:src="shop_authentication.legal_person_card_photo_f.path+'?x-oss-process=image/resize,m_fixed,h_100,w_100'"
							@click="eventImage(1)" mode="widthFix" style="width:300rpx;"></image>
					</uni-td>
				</uni-tr>
				<uni-tr v-if="shop_authentication.permit_photo ">
					<uni-td colspan="1" style="text-align:center;">许可证</uni-td>
					<uni-td>
						<image
							:src="shop_authentication.permit_photo.path+'?x-oss-process=image/resize,m_fixed,h_100,w_100'"
							@click="eventImage(1)" mode="widthFix" style="width:300rpx;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr v-if="shop_authentication.business_license_photo">
					<uni-td colspan="1" style="text-align:center;">
						营业执照
					</uni-td>
					<uni-td>
						<image
							:src="shop_authentication.business_license_photo.path+'?x-oss-process=image/resize,m_fixed,h_100,w_100'"
							@click="eventImage(0)" mode="widthFix" style="width:300rpx;"></image>
					</uni-td>
				</uni-tr>
				
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						店铺名称
					</uni-td>
					<uni-td>
						{{shopData.title}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						店铺剩余金额
					</uni-td>
					<uni-td class="color">
						￥{{(shopData.money/100).toFixed(2)}}
					</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td colspan="1" width="150" style="text-align:center;">
						店铺剩余可提现金额
					</uni-td>
					<uni-td class="color">
						￥{{(shopData.withdrawable_money/100).toFixed(2)}}
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="table">
			<view class="item">
				<view>
					<button type="primary" size="mini" @click="this.$refs.showStatus.open()"
						style="padding:0rpx 100rpx">已成功汇款</button>
				</view>
				<view style="margin:0 30rpx">
					<button type="warn" size="mini" @click="this.$refs.showFailure.open()"
						style="padding:0rpx 50rpx">拒绝汇款</button>
				</view>
				<view>
					<button type="" size="mini" style="padding:0rpx 100rpx" @click="goback">返回</button>
				</view>
			</view>
		</view>
	</view>


	<!-- 成功 提醒 -->
	<uni-popup ref="showStatus" type="center" backgroundColor="#fff">
		<view class="popup">
			<view class="title" style="color:#199bff">
				确定信息并且已经转账
			</view>
			<view style="line-height:80rpx;">
				请确认已经将金额汇入‘{{data.shop.title}}’银行卡
				<view>
					确认后将改变账单信息
				</view>
			</view>
			<button @click="eventExamine" class="uni-button" size="mini" type="primary">
				确认审核
			</button>
			<button @click=" this.$refs.showStatus.close() " class="uni-button" size="mini" type="">
				取消
			</button>
		</view>
	</uni-popup>

	<!-- 错误 提醒 -->
	<uni-popup ref="showFailure" type="center" backgroundColor="#fff">
		<view class="popup">
			<view class="title" style="color:red">
				转账申请拒绝
			</view>
			<view style="line-height:80rpx;">
				拒绝将金额汇入‘{{data.shop.title}}’银行卡
				<view>
					需填写拒绝理由
				</view>
				<view>
					<uni-easyinput errorMessage v-model="failureVal" focus placeholder="拒绝理由"></uni-easyinput>
				</view>
			</view>
			<button @click="eventFailure" class="uni-button" size="mini" type="warn">
				确认拒绝
			</button>
			<button @click=" this.$refs.showFailure.close() " class="uni-button" size="mini" type="">
				取消
			</button>
		</view>
	</uni-popup>

</template>

<script>
	import Util from "@/js_sdk/validator/util.js"
	const global = uniCloud.importObject("global",{customUI:true})
	const ORDER = uniCloud.importObject("order", {
		customUI: true
	})
	const SHOP = uniCloud.importObject("shop", {
		customUI: true
	})
	export default {
		data() {
			return {
				loading:true,
				// 面包屑
				routes: [
					{to: "/pages/index/index",name: "首页",},
					{to: "/pages/chat/examine-wdthdrawal",name: "提现列表",},
					{to: "",name: "审核详情",},
				],
				failureVal: '', //拒绝申请理由
				data: {
					shop: {},
					bank: {
						properties: {}
					},
					order: {}
				},
				shop_authentication: {
					legal_person_card_photo_z: {
						path: ""
					},
					business_license_photo: {
						path: ""
					}
				},
				shopData: {

				}
			}
		},
		onLoad(val) {
			this.getExamineData(val.billID)
		},
		methods: {
			getExamineData(_id) {
				global.getDataOne("shop_bill", {
					_id: _id
				}).then(res => {
					this.data = res.data
					this.getUsersData(res.data.bank.properties.user_id)
				})
			},
			getUsersData(user_id) {
				let field = "legal_person_card_photo_z.path,business_license_title,business_license_address,business_license_number,legal_person_card,permit_photo,legal_person_name,business_license_photo.path,legal_person_card_photo_f.path,user_id"
				global.getDataOne("shop_authentication", {user_id: user_id},field ).then(res => {
					this.shop_authentication = res.data
					this.loading=false
				})
				const db = uniCloud.database()
				db.collection("shop").where({
					create_uid: user_id
				}).field("title,money,withdrawable_money,create_uid").get({
					getOne: true
				}).then(res => {
					this.shopData = res.result.data
				})

			},
			// 已转账
			eventExamine() {
				global.updateDataToDatabase("shop_bill", {
					is_settlement: {
						is_true: true,
						create_time:new Date().getTime()
					}
				}, {
					_id: this.data._id
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						mask: true,
						duration: 1500
					}).then(() => {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/chat/examine-wdthdrawal'
							})
						}, 900)
					})
				})
			},
			// 转账拒绝
			eventFailure() {
				if (this.failureVal.length > 5) {
					uni.showLoading({
						title: '退回中（勿操作）'
					})
					// 退回金额
					var moneyJn = this.data.price + this.data.bank.serve_money * 100
					var Data = { // 构建退回数据
						is_account: true,
						create_date: Date.now(),
						shop_id: this.data.shop_id,
						shop: {
							_id: this.data.shop_id,
							title: this.data.shop.title,
						},
						order: {
							order_no: Util.setOutTradeNo("R"),
							total_fee: moneyJn,
						},
						is_settlement: {
							is_true: false,
							create_time: Date.now()
						},
						type: 1,
						user: {
							nickname: "易派商家",
							avatar: "https://mp-60d04191-dfc8-47dc-b1e1-36d6fc279352.cdn.bspapp.com/icons/shop_logo.png"
						},
						price: moneyJn,
						text: "提现退回"
					}

					SHOP.increaseWithdrawableMoney(this.data.shop_id, moneyJn)
					ORDER.updateShopMoneyByWithdrawal(this.data.shop_id, moneyJn)

					global.addDataToDatabase("shop_bill", Data)
					global.updateDataToDatabase("shop_bill", {
						failure_note: this.failureVal,
						create_date: Date.now() - 10000
					}, {
						_id: this.data._id
					}).then(res => {
						uni.showToast({title: '操作成功',mask: true,duration: 1000}).then(() => {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/chat/examine-wdthdrawal'
								})
							}, 1500)
						})
					})
				} else {
					uni.showModal({
						title: "不可执行",
						content: '拒绝理由不可少于5个字符'
					})
				}

			},
			eventImage(index) {
				if (index) {
					uni.previewImage({
						urls: [this.shop_authentication.legal_person_card_photo_z.path]
					});
				} else {
					uni.previewImage({
						urls: [this.shop_authentication.business_license_photo.path]
					});
				}
			},
			// 银行卡重构
			bankCardsReconfiguration(bank_no){
				return 	Util.formatBankCardNumber(bank_no)
			},
			// 手机号重构
			rebornMobile(mobile){
				return 	Util.formatPhoneNumber(`${mobile}`)
			},
			goback() {
				uni.navigateBack(1)
			},

			goUrl(Url) {
				uni.navigateTo({
					url: Url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		width: 500px;
		border-radius: 20rpx;
		padding: 30rpx;

		button {
			margin: 20px 50rpx;
		}
	}

	.label {
		font-weight: 500;
	}

	.color {
		color: #ff6600
	}

	.item {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: center;

		.items {
			text-align: center;
		}
	}

	.title {
		font-size: 15px;
		font-weight: bold;
	}

	.table {
		margin: 50rpx 20rpx;
		border: 1px solid #eee;
		border-bottom: none
	}

	.wdthdrawal {
		padding: 20rpx;
		font-size: 14px;
	}
</style>